<template>
  <div>


    <table border="1">
      <!--//购物车-->
      <tr><td>名称</td> <td>数量</td> <td>价格</td></tr>
      <tr v-for="(item,index) in tlist">
        <td>{{item.text}}</td>
        <td>
						<button @click="minus(index,'-')">-</button>

						<input type="number" v-model="item.num" >

						<button  @click="minus(index,'+')" >+</button>
        </td>
        <td>{{item.price}}</td>
        <!--<td>-->
          <!--<button @click="aaa(index)">-</button>-->

          <!--<input type="text" v-model="item.price">-->

          <!--<button @click="bbb(index)">+</button>-->
        <!--</td>-->


      </tr>
    </table>

		总数量:{{ totalcount() }}
		总价格:{{ pricecount() }}

    <br><br>

    {{ counter }}
    <button @click="counter++">点我就加一</button>

    {{ reverse_msg }}
    {{ reverse_msg2() }}

    <ul>
      <li v-for="(item,index) in tlist" :class="{on:index%2==0,off:index%2!=0}">
        {{item.text}}
      </li>
    </ul>


    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else>
      不是A不是B
    </div>



    <div v-html="msg"></div>

    <h2 v-if="ok">hello world</h2>

    <h1 v-show="ok">hello world</h1>
    {{ msg }}

  </div>

</template>

<script>
    export default {
        name: "test",
      //定义数据
      data(){
          return{
            msg:'<h1>这是一个变量</h1>',
            ok:false,
            tepe:'B',
            tlist:[{text:'汽车',num:1,price:10},{text:'略略略',num:4,price:40},
                  {text:'嘟嘟嘟',num:7,price:70},{text:'哈哈哈',num:9,price:90}],
            counter:0
          }
      },
      //监听属性
      watch:{
          counter:function (nval,oval) {

            console.log('计数器由'+oval+'变换为新的'+nval)
          }
      },
      //计算属性
      computed:{
          reverse_msg:function () {
            console.log(this.msg.split(''));

            return this.msg.split('').reverse().join('')
          }
      },
      //钩子方法
      mounted:function () {


      },
      //自定义方法
      methods:{

          // //汇总价格
          pricecount:function(){
            let total = 0
            for (let i=0,l=this.tlist.length;i<l;i++){
              total += this.tlist[i].price*this.tlist[i].num;
            }
            return total
          },


          //汇总数量

          totalcount:function(){

            //默认数量
            let total = 0;

            //遍历

            for(let i=0,l=this.tlist.length;i<l;i++) {
              //总数量累加
              total += this.tlist[i].num
            }
            return total;
          },
          //购物车减法
          minus:function(index,type){
            if(type=="-") {
              if (this.tlist[index].num > 0)
                this.tlist[index].num--;
            }
          else{

				this.tlist[index].num++;
			}

			},
        //购物车加法

          add:function(index){
            // if(this.tlist[index].num < 0)
            this.tlist[index].num++;
          },


          //自定义计算属性
          reverse_msg2:function () {
            console.log(this.msg.split(''));

            return this.msg.split('').reverse().join('')
          }


      }
    }
</script>

<style scoped>
.on {background: rebeccapurple;color: white}
.off {background: red;color: black}
</style>
